<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/subscribe/price' }">{{$t('订阅')}}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/subscribe/reserve' }">{{$t('订阅记录')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="reserve-card">
      <div class="reserve-card-title">{{$t('订阅记录')}}</div>
      <el-divider></el-divider>
      <!--列表 -->
      <div>
        <el-table :data="logList.slice((current-1)*pageSize,current*pageSize)" size="small" :header-cell-style="{background:'#f2f3f8',color:'#101010'}" :row-style="{height:'50px'}">
          <el-table-column prop="id" label="ID" width="95"></el-table-column>
          <el-table-column prop="type" :label="labelList[0]" ></el-table-column>
          <el-table-column prop="pay_method" :label="labelList[1]"></el-table-column>
          <el-table-column prop="pay_date" :label="labelList[2]"></el-table-column>
          <el-table-column prop="price" :label="labelList[3]" width="95"></el-table-column>
          <el-table-column prop="amount" :label="labelList[4]" width="80"></el-table-column>
          <el-table-column prop="total_price" :label="labelList[5]"></el-table-column>
          <el-table-column prop="renewal_data" :label="labelList[6]"></el-table-column>
          <el-table-column prop="status" :label="labelList[7]">
            <template #default="scope">
              <div v-if="scope.row.status ==='活跃的'">
                <span style="color: rgba(0, 128, 0, 1);">{{ scope.row.status }}</span>
              </div>
              <div v-else>
                <span>{{ scope.row.status }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div style="margin: 1rem 0 1rem 48rem;">
        <el-pagination :background="background" layout="total,prev, pager, next" :total="total" size="small" 
        @current-change="handleCurrentChange()" v-model:current-page="current" :page-sizes="pageSize" hide-on-single-page/>
        <!-- hide-on-single-page -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
data(){
  return {
    // 表格表头
    labelList:[
        this.$t('订阅记录.类型'),this.$t('订阅记录.支付方式'),this.$t('订阅记录.付款日期'),this.$t('订阅记录.单价'),
        this.$t('订阅记录.数量'),this.$t('订阅记录.总价'),this.$t('订阅记录.续费时间'),this.$t('订阅记录.状态')
      ],
    logList:[
      // {
      //   id:9878921,
      //   type:'PRO',
      //   pay_method:'Credit Card',
      //   pay_date:'24/09/2024 13:00:00',
      //   price:'$5.96',
      //   amount:2,
      //   total_price:'$10.80',
      //   renewal_data:'25/09/2024 13:00:00',
      //   status:'已过期'
      // },
    ],
    current:1,
    background:true,
    total:0,
    pageSize:10,
  }
},
// beforeRouteEnter(to, from, next) {
//     next(vm => {
//       vm.trackView();
//     });
//   },
//   beforeRouteUpdate(to, from, next) {
//     this.trackView();
//     next();
//   },
mounted ( )  { 
  // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
  this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    } ,
computed:{
  
},
methods:{
  handleCurrentChange(){
    // this.current = page
    // this.getProductSaleList(page,this.pageSize)
  },
  // trackView() {
  //     const gtmData = this.$route.meta.gtm;
  //     if (gtmData) {
  //       this.$gtm.trackView({
  //         page: this.$route.path,
  //         gtm: gtmData
  //       });
  //     }
  //   }
  }
}
</script>

<style lang="scss" scoped>
.reserve-card{
  margin: 1rem 0 0 0;
  padding: 1rem;
  box-sizing: border-box;
  min-width: 1200px;
  height: 760px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  .reserve-card-title{
        width: 19.38rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 1.25rem;
        font-weight: 600;
        text-align: left;
        font-family: AlibabaPuHui-medium;
    }
}
/* el-divider 修改高度效果 */
.el-divider--horizontal{
     margin: 1rem 0;
    //  background: 0 0;
     border-top: 0.1rem solid #f2f3f5;
 }
</style>